<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('新增试题')" />
</head>
<style>
	.tip-item {
	    color: #409EFF;
	    padding-left: 10px;
	}
</style>
<body class="white-bg">
    <div id="app" class="main-content">
    	<h3>组卷信息</h3>
    	<el-card style="margin-top: 20px">
    		<el-row>
    			<el-col :span="12">
    				<el-button class="filter-item" size="small" type="primary" icon="el-icon-plus" @click="handleAdd">
          				添加题库
        			</el-button>
    			</el-col>
    			<el-col :span="12">
    				<div style="float: right; font-weight: bold; color: #ff0000">
		    			试卷总分：{{ form.totalScore }}分
		    		</div>
    			</el-col>
    		</el-row>
    		<el-row>
    			<el-col :span="24">
    				<el-table :data="repoList" :border="false" empty-text="请点击上面的`添加题库`进行设置"  
    					style="width: 100%; margin-top: 15px"  >
          				<el-table-column  label="题库" width="200" >
				     		<template slot-scope="scope">
					            <el-select size="medium" v-model="scope.row.repoId" filterable :multiple="false" placeholder="选择或搜索题库">
								    <el-option
								      v-for="item in form.repoAllList"
								      :key="item.id"
								      :label="item.title"
								      :value="item.id">
								    </el-option>
					    		</el-select>
				            </template>
          				</el-table-column>
          				<el-table-column label="单选数量"  align="center" >
			            	<template slot-scope="scope">
			             		<el-input-number size="medium" v-model="scope.row.radioCount" :controls="false" style="width: 100%" />
			            	</template>
          			 	</el-table-column>
          				<el-table-column  label="单选分数"  align="center"  >
				            <template slot-scope="scope">
				            	<el-input-number size="medium" v-model="scope.row.radioScore" :controls="false" style="width: 100%" />
				            </template>
          				</el-table-column>
          				<el-table-column label="多选数量" align="center" >
				            <template slot-scope="scope">
				            	<el-input-number size="medium" v-model="scope.row.multiCount" :controls="false" style="width: 100%" />
				            </template>
          				</el-table-column>
				        <el-table-column label="多选分数" align="center" >
					        <template slot-scope="scope">
					        	<el-input-number size="medium" v-model="scope.row.multiScore" :controls="false" style="width: 100%" />
					        </template>
				        </el-table-column>
          				<el-table-column label="判断题数量" align="center" >
				            <template slot-scope="scope">
				            	<el-input-number size="medium" v-model="scope.row.judgeCount" :controls="false" style="width: 100%" />
				            </template>
          				</el-table-column>
          				<el-table-column  label="判断题分数" align="center" >
				            <template slot-scope="scope">
				            	<el-input-number size="medium" v-model="scope.row.judgeScore" :controls="false" style="width: 100%" />
				            </template>
			            </el-table-column>
			            <el-table-column  label="删除" align="center" width="80px" >
				            <template slot-scope="scope">
				            	<el-button type="danger" icon="el-icon-delete" circle @click="removeItem(scope.$index)" />
				            </template>
			          	</el-table-column>
        			</el-table>
    			</el-col>
    		</el-row>
    	</el-card>
    	<h3 style="margin-top:10px">考试配置</h3>
    	<el-card style="margin-top: 20px">
	    	<el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="80px">
	         	<el-row>
		         	<el-col :span="8">
		         		<el-form-item label="考试名称" prop="title">
	          				<el-input v-model="form.title" size="medium"/>
	        			</el-form-item>
		         	</el-col>
		         	<el-col :span="8">
		         		<el-form-item label="考试描述" prop="content">
	          				<el-input v-model="form.content" size="medium" />
	        			</el-form-item>
		         	</el-col>
		         	<el-col :span="8">
		         		<el-form-item label="组卷数" prop="paperNum">
	          				<el-input-number :min="1" :max="10" v-model="form.paperNum" size="medium"></el-input-number>
	          				<el-tooltip  class="item" effect="dark" content="根据组卷信息，随机组装试卷套数" placement="top">
									<i class="el-icon-question tip-item" style="font-size: 18px;"></i>
							</el-tooltip>
	        			</el-form-item>
		         	</el-col>
	         	</el-row>
	         	<el-row>
		         	<el-col :span="8">
		         		<el-form-item label="总分数" prop="totalScore">
	          				 <el-input-number :min="0" v-model="form.totalScore" size="medium" disabled />
	        			</el-form-item>
		         	</el-col>
		         	<el-col :span="8">
		         		<el-form-item label="及格分" prop="qualifyScore">
	          				<el-input-number :min="0" v-model="form.qualifyScore" size="medium"/>
	        			</el-form-item>
		         	</el-col>
		         	<el-col :span="8">
		         		<el-form-item  label="考试时长" prop="totalTime">
							<el-input-number :min="0" v-model="form.totalTime" size="medium" ></el-input-number>
							<el-tooltip  class="item" effect="dark" content="单位：分钟" placement="top">
									<i class="el-icon-question tip-item" style="font-size: 18px;"></i>
							</el-tooltip>
	        			</el-form-item>
		         	</el-col>
	         	</el-row>
	         	<el-row>
		         	<el-col :span="8">
		         		<el-form-item  label="限考次数" prop="maxCount">
	          				 <el-input-number :min="0" v-model="form.maxCount" size="medium" ></el-input-number>
	          				 <el-tooltip class="item" effect="dark" content="限制每个考生有几次考试机会，0为不限制" placement="top">
						    	<i class="el-icon-question tip-item" style="font-size: 18px;"></i>
						     </el-tooltip>
						     
	        			</el-form-item>
		         	</el-col>
		         	<el-col :span="8">
		         		<el-form-item label="是否限时" prop="timeLimit">
	          				<el-checkbox v-model="form.timeLimit" />
	        			</el-form-item>
		         	</el-col>
	         	</el-row>
	         	<el-row>
	         		<el-col :span="24">
		         		<el-form-item v-if="form.timeLimit" label="考试时间" prop="totalTime">
				          <el-date-picker
				            v-model="dateValues"
				            format="yyyy-MM-dd"
				            value-format="yyyy-MM-dd"
				            type="daterange"
				            range-separator="至"
				            start-placeholder="开始时间"
				            end-placeholder="结束时间"
				            size="medium"
				          />
				        </el-form-item>
		         	</el-col>
	         	</el-row>
	        </el-form>
    	</el-card>
    	<div style="margin-top: 20px">
	    	<el-row type="flex" justify="center" align="middle">
	    		<el-col :span="24" style="text-align:center">
	    			<el-button type="success" icon="el-icon-check" size="small" @click="handleSave">保存</el-button>
	    			<el-button type="danger" icon="el-icon-close" size="small" @click="handleClose">关闭</el-button>
	    		</el-col>
	    	</el-row>
    	</div>
	</div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript" >
    	var prefix = ctx + "exam/exam";
    	var repoListData = [[${repoList}]];
		var vObj = new Vue({
			el: '#app',
			data(){
				return{
					form:{
						title:'',
						content:'',
						paperNum:1,
						totalScore:0,
						qualifyScore:null,
						totalTime:null,
						maxCount:0,
						timeLimit: false,
						startTime:null,
						endTime:null,
						repoAllList:[],
						repoList:[]
					},
					rules:{
						title: [
				          { required: true, message: '考试名称不能为空！' }
				        ],
				        content: [
				          { required: true, message: '考试描述不能为空！' }
				        ],
				        paperNum: [
						  { required: true, message: '组卷数不能为空！' }
						],
				        totalScore: [
				          { required: true, message: '考试分数不能为空！' }
				        ],
				        qualifyScore: [
				          { required: true, message: '及格分不能为空！' }
				        ],
				        totalTime: [
				          { required: true, message: '考试时间不能为空！' }
				        ],
				        maxCount: [
				          { required: true, message: '限考次数不能为空！' }
				        ]

					},
					dateValues: [],
					repoList:[]
				}
			},
			methods: {
				handleAdd(){
					 this.repoList.push({ radioCount: 0, radioScore: 0, multiCount: 0, multiScore: 0, judgeCount: 0, judgeScore: 0, saqCount: 0, saqScore: 0 });
				},
				removeItem(index) {
				     this.repoList.splice(index, 1);
				},
				handleClose(){
					closeItem();
				},
				handleSave(){
					this.$refs.form.validate((valid) => {
				        if (!valid) {
				          return;
				        }
				        if(this.form.totalScore === 0){
			        	  	this.$notify({
			                    title: '提示信息',
			                    message: '考试规则设置不正确，请确认！',
			                    type: 'warning',
			                    duration: 2000
			                })
				           return
				        }
				        for (let i = 0; i < this.form.repoList.length; i++) {
				        	var repo = this.form.repoList[i];
				        	var valid = false;
				        	if ((repo.radioCount > 0 && repo.radioScore === 0) || (repo.radioCount === 0 && repo.radioScore > 0)) {
			                    this.$notify({
			                    title: '提示信息',
			                    message: '题库第：[' + (i + 1) + ']项存在无效的单选题配置！',
			                    type: 'warning',
			                    duration: 2000
			                    })
								return
				            }
 							if ((repo.multiCount > 0 && repo.multiScore === 0) || (repo.multiCount === 0 && repo.multiScore > 0)) {
					            this.$notify({
				                    title: '提示信息',
				                    message: '题库第：[' + (i + 1) + ']项存在无效的多选题配置！',
				                    type: 'warning',
				                    duration: 2000
			                    })
								return
				            }
				            if ((repo.judgeCount > 0 && repo.judgeScore === 0) || (repo.judgeCount === 0 && repo.judgeScore > 0)) {
			                    this.$notify({
				                    title: '提示信息',
				                    message: '题库第：[' + (i + 1) + ']项存在无效的判断题配置！',
				                    type: 'warning',
				                    duration: 2000
				                })
			                    return
		                    }
				            for(let y = 0 ; y < this.form.repoAllList.length; y++){
				            	var repoData = this.form.repoAllList[y];
				            	if(repo.repoId == repoData.id){
				            		if(repo.radioCount <= repoData.radioCount && repo.multiCount <= repoData.multiCount && repo.judgeCount <= repoData.judgeCount){
				            			valid = true;
				            		}
				            	}
				            }
				            if(!valid){
				            	 this.$notify({
				                    title: '提示信息',
				                    message: '题库第：[' + (i + 1) + ']项请校验题库单选、多选、判断题数量是否超出题库数量！',
				                    type: 'warning',
				                    duration: 2000
				                })
			                    return
				            }
				            var formData = {};
				            formData.title = this.form.title;
				            formData.content = this.form.content;
				            formData.paperNum = this.form.paperNum;
				            formData.totalScore = this.form.totalScore;
				            formData.qualifyScore = this.form.qualifyScore;
				            formData.totalTime = this.form.totalTime;
				            formData.maxCount = this.form.maxCount;
				            formData.timeLimit = this.form.timeLimit;
				            formData.startTime = this.form.startTime;
				            formData.endTime = this.form.endTime;
				            formData.examRepo = JSON.stringify(this.form.repoList);
				            $.operate.saveTab(prefix + "/add", formData);
				        }
					})
				}
			},
			watch: {
				dateValues: {
			    	handler() {
			    		if(this.dateValues.length > 0){
			    			this.form.startTime = this.dateValues[0];
				        	this.form.endTime = this.dateValues[1];
			    		}else{
			    			this.form.startTime = null;
				        	this.form.endTime = null;
			    		}
			      	}
				},
				repoList:{
					handler() {
						let that = this
					    that.form.totalScore = 0
				        this.repoList.forEach(function(item) {
				        	that.form.totalScore += item.radioCount * item.radioScore
				            that.form.totalScore += item.multiCount * item.multiScore
				            that.form.totalScore += item.judgeCount * item.judgeScore
				        })
					    // 赋值
					    this.form.repoList = this.repoList
				    },
					deep: true
				}
			},
			created(){
				this.form.repoAllList = repoListData;
			}
		})
	</script>
</body>
</html>
